<template>
    <div class="box">
        <div class="top">
            <div class="dizhi">
                <div>
                    <span class="iconfont icon-shouhuodizhi"></span>
                    <span>解放8号</span>
                </div>
                <div>
                    <span class="iconfont icon-saoyisao"></span>
                    <span class="iconfont icon-ico"></span>
                    <span class="iconfont icon-xiaoxi"></span>
                </div>
            </div>
            <div class="sousuo">
                <div>
                    <span class="iconfont icon-sousuo"></span>
                    <input type="text" placeholder="盒马电子卡">
                </div>
                <div>
                    <span class="ss">搜索</span>
                </div>
            </div>
        </div>
        <div class="Img">
            <img src="../assets/images/产地直发.png" alt="">
        </div>
        <div class="Item">
            <ul class="ul1">
                <li v-for="(item, index) in list" :key="index">
                    <img :src="item.img" alt=""><br>{{ item.title }}
                </li>
            </ul>
        </div>
        <div class="yiqing">
            <div class="lingdang">
                <img src="../assets/images/铃铛.png" alt="">
            </div>
            <div class="text">
                受全国多地疫情管控影响，部分订单可能会延迟...
            </div>
            <div class="jiantou">
                <img src="../assets/images/箭头.png" alt="">
            </div>
        </div>
        <div class="dangji">
            <div class="dangji_top">
                <div class="dangji_top_div1">
                    食在当季
                </div>
                <div class="dangji_top_div2">
                    <img src="../assets/images/赏期推荐.png" alt="">
                </div>
                <div class="dangji_top_div3">
                    查看全部 〉
                </div>
            </div>
            <div class="dangji_content">
                <div class="dangji_content_top">
                    <div>
                        <img src="../assets/images/小盒马.png" alt="">
                    </div>
                    <div>
                        “地标名品，原切黄牛肉”
                    </div>
                </div>
                <div class="dangji_content_niurou">
                    <div class="dangji_content_niurou_left">
                        <img src="../assets/images/牛肉.png" alt="">
                    </div>
                    <div class="dangji_content_niurou_right">
                        <div class="dangji_content_niurou_right_div1">
                            阳信牛肉 原切黄牛牛
                        </div>
                        <div class="dangji_content_niurou_right_div2">
                            腩 1kg
                        </div>
                        <div class="dangji_content_niurou_right_div3">
                            店长每日精选
                        </div>
                        <div class="dangji_content_niurou_right_div4">
                            省14元
                        </div>
                        <div class="dangji_content_niurou_right_div5">
                            <span class="span1">￥</span>
                            <span class="span2">145</span>
                            <span class="span3">/袋</span>
                            <span class="span4">￥159</span>
                            <span class="span5">
                                <img src="../assets/images/蓝购物车.png" alt="">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="listTwo">
            <ul class="ul2">
                <li v-for="(item, index) in listTwo" :key="index">
                    <div class="listTwo_top">
                        <div class="div_1">
                            <div class="div_left">
                                {{ item.title }}
                            </div>
                            <div class="div_right">
                                {{ item.text }}
                            </div>
                        </div>
                        <div class="div_img">
                            <div>
                                <img :src="item.img" alt="">
                                <span>{{ item.jiage }}</span>
                            </div>
                            <div>
                                <img :src="item.src" alt="">
                                <span>{{ item.jiage }}</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="fuli">
            <div>
                <div class="div1"><img src="../assets/images/转享福利.png" alt=""></div>
                <div class="div2">

                </div>
            </div>
            <div>

            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { todo } from '../types/todo'
import { todoTwo } from '../types/todoTwo'
export default defineComponent({
    setup() {
        const list = reactive<todo[]>([
            {
                img: require('@/assets/images/时令水果.png'),
                title: '时令水果'
            },
            {
                img: require('@/assets/images/新鲜蔬菜.png'),
                title: '新鲜蔬菜'
            },
            {
                img: require('@/assets/images/海鲜水产.png'),
                title: '海鲜水产'
            },
            {
                img: require('@/assets/images/肉禽蛋品.png'),
                title: '肉禽蛋品'
            },
            {
                img: require('@/assets/images/食品干货.png'),
                title: '食品干货'
            },
            {
                img: require('@/assets/images/美妆个护.png'),
                title: '美妆个护'
            },
            {
                img: require('@/assets/images/母婴百货.png'),
                title: '母婴百货'
            },
            {
                img: require('@/assets/images/保健滋补.png'),
                title: '保健滋补'
            },
            {
                img: require('@/assets/images/中外名酒.png'),
                title: '中外名酒'
            },
            {
                img: require('@/assets/images/彩妆时尚.png'),
                title: '彩妆时尚'
            },

        ])
        const listTwo = reactive<todoTwo[]>([
            {
                img: require('@/assets/images/盒算.png'),
                src: require('@/assets/images/盒算2.png'),
                title: '超盒算',
                text: '农家散养',
                jiage: '￥68'
            },
            {
                img: require('@/assets/images/跨境.png'),
                src: require('@/assets/images/跨境2.png'),
                title: '跨境GO',
                text: '全球大牌',
                jiage: '￥698'
            },
            {
                img: require('@/assets/images/寻鲜.png'),
                src: require('@/assets/images/寻鲜2.png'),
                title: '码头寻鲜',
                text: '品一锅鲜',
                jiage: '￥92'
            },
            {
                img: require('@/assets/images/鲜果.png'),
                src: require('@/assets/images/鲜果2.png'),
                title: '基地鲜果',
                text: '果园飘香',
                jiage: '￥41.8'
            },
        ])
        return {
            list,
            listTwo
        }
    }
})
</script>

<style lang="scss" scoped>
.box {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 85px;


    .top {
        height: 80px;
        background-color: #F1A551;
        display: flex;
        flex-direction: column;
        font-size: 16px;

        .dizhi {
            color: white;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }

        span {
            padding: 0 3px;
        }

        .sousuo {
            display: flex;
            height: 35px;
            justify-content: space-between;
            align-items: center;
            margin: 0 10px;
            padding-left: 15px;
            background-color: white;
            border-radius: 40px;

            input {
                height: 33px;
                border: none;
                outline: none;
            }

            .ss {
                line-height: 33px;
                color: white;
                background-color: #F1A950;
                border-radius: 30px;
                display: inline-block;
                padding: 0 15px;
            }
        }
    }

    .Img {
        img {
            margin-bottom: -7px;
            width: 100%;
        }
    }

    .Item {
        margin-bottom: 10px;
        padding: 10px 0;
        background-color: #E1A750;

        .ul1 {
            margin: 0 10px;
            display: flex;
            border-radius: 10px;
            padding: 10px 0;
            width: 351px;
            height: 150px;
            flex-wrap: wrap;
            background-color: white;

            li {
                text-align: center;
                width: 70px;
                height: 65px;
                font-size: 12px;
                margin-bottom: 20px;

                img {
                    margin-bottom: 7px;
                    width: 42px;
                    height: 42px;
                }
            }
        }
    }

    .yiqing {
        background-color: #FFF7EC;
        margin: 0 10px;
        height: 31px;
        display: flex;
        line-height: 31px;

        .lingdang {
            img {
                width: 31px;
                border-radius: 10px 0 0 10px;

            }
        }

        .text {
            line-height: 31px;
            width: 285px;
            font-size: 13px;

        }

        .jiantou {
            line-height: 31px;

            img {
                margin-left: 10px;
                width: 20px;
            }
        }

    }

    .dangji {
        margin: 0 10px;
        margin-top: 10px;
        width: 355px;
        height: 197px;
        background-image: url(../assets/images/食在当季.png);
        background-size: 100%;
        opacity: 0.8;
        display: flex;
        flex-direction: column;

        .dangji_top {
            display: flex;

            .dangji_top_div1 {
                font-size: 16px;
                font-weight: 800;
                color: #DF8A16;
                line-height: 38px;
                margin-left: 10px;
            }

            .dangji_top_div2 {
                img {
                    width: 50px;
                    border-radius: 20px;
                    margin-left: 5px;
                    margin-bottom: 1px;
                }
            }

            .dangji_top_div3 {
                margin-left: 153px;
                font-size: 12px;
                line-height: 36px;
                color: #DF8A16;
            }
        }

        .dangji_content {
            margin-left: 43px;
            width: 270px;
            height: 150px;
            border-radius: 10px;
            background-color: #F7F7F7;
            display: flex;
            flex-direction: column;

            .dangji_content_top {
                line-height: 30px;
                font-size: 12px;
                display: flex;
                color: #CA9229;
                border-bottom: 1px solid #e7e4f2;

                img {
                    margin-top: 2px;
                    width: 25px;
                    margin-left: 10px;
                    border-radius: 50px;
                }
            }

            .dangji_content_niurou {
                display: flex;

                .dangji_content_niurou_left {
                    img {
                        width: 100px;
                        height: 100px;
                        border-radius: 10px;
                        margin-left: 10px;
                        margin-top: 5px;
                    }
                }

                .dangji_content_niurou_right {
                    .dangji_content_niurou_right_div1 {
                        margin-top: 5px;
                        font-size: 15px;
                        font-weight: 700;
                        margin-left: 5px;
                    }

                    .dangji_content_niurou_right_div2 {
                        font-size: 15px;
                        font-weight: 700;
                        margin-left: 5px;
                    }

                    .dangji_content_niurou_right_div3 {
                        font-size: 14px;
                        color: #BEAE7E;
                        margin-left: 5px;

                    }

                    .dangji_content_niurou_right_div4 {
                        width: 45px;
                        font-size: 12px;
                        color: #FC575F;
                        border: 1px solid #FC575F;
                        text-align: center;
                        border-radius: 3px;
                        margin-left: 5px;
                        // margin-top: 5px;
                    }

                    .dangji_content_niurou_right_div5 {
                        .span1 {
                            margin-left: 5px;
                            font-size: 13px;
                            color: #D86B53;
                        }

                        .span2 {
                            font-size: 16px;
                            color: #D86B53;
                        }

                        .span3 {
                            font-size: 12px;
                            color: #D7D4CD;
                        }

                        .span4 {
                            font-size: 12px;
                            color: #D7D4CD;
                            margin-left: 5px;
                            text-decoration: line-through;
                        }

                        .span5 {
                            img {
                                width: 20px;
                                margin-left: 30px;
                                border-radius: 50px;
                            }
                        }
                    }
                }
            }

        }



        // img {
        //     border-radius: 10px;
        //     width: 100%;
        // }
    }

    .listTwo {
        padding-left: 10px;
        background-color: #F7F7F7;

        .ul2 {
            display: flex;
            flex-wrap: wrap;

            li {
                background-color: white;
                margin-right: 10px;
                margin-bottom: 10px;
                padding-bottom: 5px;

                .listTwo_top {
                    width: 150px;
                    display: flex;
                    margin: 0 10px;
                    border-radius: 10px;
                    flex-direction: column;

                    .div_1 {
                        line-height: 40px;
                        height: 40px;
                        display: flex;

                        .div_left {
                            margin-left: 10px;
                            font-size: 18px;
                            font-weight: 700;
                        }

                        .div_right {
                            margin-left: 10px;
                            margin-top: 12px;
                            height: 16px;
                            color: white;
                            line-height: 16px;
                            padding: 1px 2px;
                            border-radius: 5px;
                            background-color: #E4946E;
                            font-size: 12px;
                        }
                    }

                    .div_img {
                        display: flex;
                        text-align: center;
                        color: #F95132;

                        img {
                            margin: 0 10px;
                            width: 60px;
                            margin-bottom: -17px;
                        }

                        span {
                            font-weight: 600;
                            border: 1px solid #F95132;
                            border-radius: 5px;
                            display: inline-block;
                            font-size: 12px
                        }

                        ;
                    }
                }
            }

            li:nth-child(2) .listTwo_top .div_1 .div_right {
                background-color: #EAA13A;
            }

            li:nth-child(3) .listTwo_top .div_1 .div_right {
                background-color: #C4CB3B;
            }

            li:nth-child(4) .listTwo_top .div_1 .div_right {
                background-color: #C8A57F;
            }
        }
    }

    .fuli {
        margin: 0 10px;
        display: flex;

        .div1 {
            margin-bottom: -7px;

            img {
                width: 170px;
                border-radius: 10px 10px 0 0;
            }
        }

        .div2 {
            height: 150px;
            background-color: #FF6717;
        }
    }

}
</style>